<template>
  <el-slider
    v-model="identifySlider"
    :class="{ sliderDisabled: sliderDisabled, labelHidden: onSliderMoving }"
    class="slider"
    @change="sliderChange"
    @input="onSliderInput"
    :show-tooltip="false"
    :disabled="sliderDisabled"
  ></el-slider>
</template>

<script>
export default {
  data () {
    return {
      sliderDisabled: false, // 验证码滑块启用禁用
      identifySlider: 0,
      onSliderMoving: false
    }
  },
  methods: {
    sliderChange (val) {
      this.onSliderMoving = false
      if (val !== 100) {
        // max默认值100
        let timer = setInterval(() => {
          if (this.identifySlider > 0) {
            this.identifySlider--
          } else {
            this.onSliderMoving = false
            clearInterval(timer)
          }
        }, 0)
      } else {
        this.sliderDisabled = true
        this.$emit('handleIdentifySuccess', null)
      }
    },
    onSliderInput (val) {
      val > 0 && (this.onSliderMoving = true)
    }
  }
}
</script>

<style scoped lang="scss">
.slider {
  height: 30px;
  width: calc(100% - 30px);
  padding-right: 30px;
  display: inline-block;
  position: relative;
  background-color: #f2f8ff;
  border-radius: 5px;
  transition: all 0.3s;
  margin-bottom: 15px;
  &::after {
    content: '向右滑动验证';
    color: #b1c4d9;
    font-size: 12px;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /deep/ .el-slider__runway {
    margin: 0;
    height: 100%;
    background-color: transparent;
    .el-slider__bar {
      background-color: #67c23a;
      height: 100%;
      padding-right: 10px;
    }
    .el-slider__button-wrapper {
      top: 0;
      transform: translateX(0);
      width: 30px;
      height: 100%;
      .el-slider__button {
        height: 100%;
        text-align: center;
        width: 30px;
        max-width: 30px;
        border: none;
        background-color: #45aeff;
        border-radius: 5px;
        &:hover {
          transform: scale(1) !important;
        }
        &::after {
          content: '\e6e0';
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          font-family: element-icons, serif !important;
          speak: none;
          color: #fff;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
        }
      }
      .el-slider__button.hover,
      .el-slider__button.dragging {
        transform: scale(1) !important;
      }
    }
  }
}
.sliderDisabled {
  /deep/ .el-slider__button {
    &::after {
      content: '\e6da' !important;
    }
  }
  &::after {
    content: '已完成验证';
    color: #ffffff;
  }
}
.labelHidden {
  &::after {
    z-index: -1;
  }
}
</style>
